<template>
	<view class="container">
		
		<view class="un-top" id="tu4" v-if="seckillList1[currentTab]">
			<image  :src="img+'/top/seckill.jpg'" mode="aspectFill" ></image>
		</view>
		
		<scroll-view class="floor-list" scroll-with-animation scroll-x :scroll-left="scrollLeft">
			<view class="scoll-wrapper">
				<view  v-for="(item, index) in 12" :key="index" class="floor-item" @click="swichMenu(index)" :class="currentTab==index ? 'active' : ''">
					<view >
						<text class="un-title clamp" >{{index*2}}:00</text>
						<text v-if="seckillList1[index]==null">暂无商品</text>
						<view v-else>
							<text v-if="index>time" >即将开抢</text>
							<text v-if="index<time" >已结束</text>
							<text v-if="index==time">抢购中</text>
						</view>
					</view>
				</view>
			</view>
			
		</scroll-view>
		
		<swiper :current="currentTab" class="swiper-box" :duration="300" @change="changeTab">
			<swiper-item v-for="(item1, index1) in seckillList1" :key="index1">
				<scroll-view class="list"  scroll-y >
					<view class="seckill-s">
						<!-- 空白页 -->
						<view v-if="seckillList1[index1]==null" class="empty">
							<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
							<view class="empty-tips">此时段暂无秒杀商品</view>
						</view>
					
						<view v-else class="seckill-section"  v-for="(item2,index2) in seckillList1[index1]" :key="index2" @click="navToProduct1(item2)">
							<view class="un-seckillimage-wrapper" >
								<image :src="img+item2.THUMB" mode="aspectFill"></image>
							</view>
							<view >
								<text class="un-seckilltitle clamp">{{item2.NAME}}</text>
								<text class="un-seckilltit2 title2 clamp">{{item2.SHORTINFO}}</text>
								<text class="un-seckilltit2">秒杀价</text>
								<text class="un-seckillprice">￥{{item2.SPIKEPRICE}}</text>
								<text class="un-seckilltit3">原价</text>
								<text class="un-seckill-m-price">￥{{item2.SELLPRICE}}</text>
								<text class="un-seckilltit2 clamp">已售{{item2.SALECOUNT}}</text>
								<view style="width: 90%;">
									<view class="cu-progress1" v-if="item2.SPIKELEFT===0 && index1<=time">
										<view class="bg-red" >被抢光了</view>
									</view>
									<view class="cu-progress" v-if="index1<time && item2.SPIKELEFT>0">
										<text class="cu-progress-text">已售{{item2.SPIKENUM-item2.SPIKELEFT}}件</text>
									</view>
									<view class="cu-progress" v-if="index1==time && item2.SPIKELEFT>0">
										<view class="bg-yellow" :style="[{ width:loading? (item2.SPIKELEFT/item2.SPIKENUM*100)+'%':''}]"></view>
										<text class="cu-progress-text">仅剩{{item2.SPIKELEFT}}件</text>
									</view>
									
									<view class="cu-progress" v-if="  index1>time">
										<view class="bg-yellow" :style="[{ width:loading?'100%':''}]"></view>
										<text class="cu-progress-text">限量{{item2.SPIKENUM}}件</text>
									</view>
									
									<!-- <text class="un-tixing" v-if="item.SPIKELEFT===0">去看看</text> -->
									<text class="un-tixing" v-if="item2.SPIKELEFT > 0 && index1==time"  @click="buy(item2)">马上抢</text>
									<!-- <text class="un-tixing" v-if="index1>time">设置提醒</text> -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				guding4:false,
				seckillList:[
					{goodslist:[]},
				],
				seckillList1:[],
				scrollLeft: 0,
				isClickChange: false,
				currentTab: 0,
				loading: false,
				time:0,
				img:'',
			}
		},
		// onNavigationBarButtonTap() {  
		//     console.log("点击了自定义按钮");  
		// },
		onLoad: function() {
			this.loadData();
			//初始化数据
			let that = this;
			setTimeout(function() {
				that.loading = true
			}, 500)
			this.img = getApp().globalData.imageAddress
			if(new Date().getHours()%2 == 0){
				this.currentTab = new Date().getHours()/2 
			}else{
				this.currentTab = Math.floor(new Date().getHours()/2)
			}
			this.scrollLeft=(this.currentTab-1)*100
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onBackPress( ) {
			console.log("LLLLLLLLLLLLL");
		},
		/* onPageScroll() {
			uni.createSelectorQuery().select('#tu4').boundingClientRect().exec((ret) => {
				const rect = ret[0];
				if (rect.top<=-150) {
					this.guding4=true;
				}else{
					this.guding4=false;
				}
			});
			
		}, */
		methods: {  
			async loadData() {
				// let seckillList1 = await this.$api.json('seckillList');
				// let seckillList2 = seckillList1.map(item => {
				// 	if (item.title=='12:00'){
				// 		item.state = "已开抢";
				// 	} else if(item.title=='14:00'){
				// 		item.state = "抢购中";
				// 	}else{
				// 		item.state = "即将开抢";
				// 	}
				// 	item.goodslist.map(goods=>{
				// 		goods.sell=((goods.sum-goods.remain)/goods.sum*100)+'%'
				// 	})
				// 	return item;
				// });
				//  this.seckillList = seckillList2 || [];
				 
				 
				//加载信息
				this.$http.post("/goods/spikeList",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
				}).then((e)=>{
					console.log("接受到的秒杀数据",e.data.OBJECT)
					let arr = e.data.OBJECT
					//清空数组
					this.seckillList1.splice(0,this.seckillList1.length)
					for(var i=0 ; i<24;i+=2){
						this.seckillList1.push(arr[i])
					}
					var nowtime = new Date()
					console.log("this.seckillList1",this.seckillList1)
					if(new Date().getHours()%2 == 0){
						this.time = new Date().getHours()/2 
					}else{
						this.time = Math.floor(new Date().getHours()/2)
					}
				}).catch((err)=>{
					console.log("请求超时",err);
				})
			},
			// buy(item){
			// 	uni.navigateTo({
			// 		url : '/pages/order/createOrderSpike?id='+item.ID+'&SID='+item.SID+'&spike=1'
			// 		
			// 	})
			// },
			
			
			look(item){
				uni.navigateTo({
					url : '/pages/product/product1?id='+item.ID+'&spike=1'
				})
			},
			//选择时间段
			swichMenu: async function(current) { //点击其中一个 menu
					if (this.currentTab == current) {
						return false;
					} else {
						this.currentTab = current;
					}
					this.scrollLeft=(this.currentTab-1)*100
			},
			//swiper 切换
			changeTab(e){
				this.currentTab = e.target.current;
				this.loadData();
			},
			//跳转商品详情
			navToProduct1(item){
				var time ;
				if(new Date().getHours()%2 == 0){
					time = new Date().getHours()/2 
				}else{
					time = Math.floor(new Date().getHours()/2)
				}
				if ( time == this.currentTab ){
					uni.navigateTo({
						//正在抢
						url : '/pages/product/product1?id='+item.ID+'&spike=1&state=1'
					})
				} else if ( time < this.currentTab ){
					uni.navigateTo({
						//未开始
						url : '/pages/product/product1?id='+item.ID+'&spike=1&state=2'
					})
				}
				// if(item.remain > 0 && this.seckillList[this.currentTab].state!=='即将开抢'){
				// 	uni.navigateTo({  
				// 		url:`/pages/product/product1?id=`+item.id,
				// 		
				// 	})  
				// }
				
				// console.log(this.seckillList[this.currentTab].state);
				
				// if(item.remain > 0 && this.seckillList[this.currentTab].state!=='即将开抢'){
				// 	uni.navigateTo({  
				// 		url:`/pages/product/product1?id=`+item.id,
				// 		
				// 	})  
				// }
				
				
			}, 
		},
	}
</script>

<style lang="scss">
	.un-top{
		width: 100%;
		height: 310upx;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
		
	.floor-list{
		background: #999999;
		width: 100%;
		height: 100upx;
		z-index: 2;
		white-space: nowrap;
		color: #FFFFFF;
		.scoll-wrapper{
			display:flex;
			.floor-item{
				margin-right:10upx 20upx;
				font-size: 25upx;
				color: #ffffff;
				line-height: 1.5;
				text-align: center;
				padding: 12upx 70upx;
				.un-title{
					font-weight: 900;
					font-size: 28upx;
				}
			}
			.active {
				background-color: rgba(255, 168, 71, 1);
			}
		}
	}
		
		
	
	page,.container{
		background-color: #f5f5f5;
		height: 100%;
		.swiper-box {
			flex: 1;
			width: 100%;
			height: calc(100% - 100upx);
			// height: 100%;
			.list{
				height: 100%;
				width: 100%;
			}
		}
	}
	
	.seckill-s{
		margin-top: 30upx;
		.seckill-section{
		
			display:flex;
			flex-wrap:wrap;
			padding: 20upx 30upx;
			background: #fff;
		
			.seckill-item{
				
				display:flex;
				flex-direction: row;
				width: 100%;
				padding-bottom: 40upx;
				&:nth-child(2n+1){
					margin-right: 4%;
				}
			}
			.un-seckillimage-wrapper{
				
				margin-left: 45upx;
				width: 180upx;
				height: 180upx;
				border-radius: 3px;
				
				image{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}
			.un-seckilltitle{
				width: 350upx;
				margin-left: 40upx;
				font-size: 28upx;
				color: $font-color-dark;
				line-height: 50upx;
				overflow: hidden;
				
			}
			.un-seckillprice{
				
				font-size: 32upx;
				color: $uni-color-primary;
				line-height: 1;
				line-height: 50upx;
			}
			.un-seckill-m-price{
				font-size: 24upx;
				text-decoration: line-through;
				color: $font-color-light;
			}
			.un-seckilltit2{
				width: 400upx;
				margin-left: 40upx;
				font-size: 24upx;
				color: $font-color-light;
				line-height: 25upx;
			}
			.un-seckilltit3{
				margin-left: 10upx;
				font-size: 24upx;
				color: $font-color-light;
				line-height: 25upx;
			}
			
			
			.un-tixing{
				left: 0px;
				top: 0px;
				width: 67px;
				height: 25px;
				background: inherit;
				background-color: #E02E24;
				border: none;
				border-radius: 3px;
				-moz-box-shadow: none;
				-webkit-box-shadow: none;
				box-shadow: none;
				font-family: '微软雅黑';
				font-weight: 404;
				font-style: normal;
				font-size: 12px;
				color: #FFFFFF;
				float: right;
				
				text-align: center;
				line-height: 45upx
			}
			
			
			.cu-progress {
				margin-left: 40upx;
				overflow: hidden;
				height: 28upx;
				background-color: #ffffff;
				display: inline-flex;
				text-align: center;
				width: 40%;
				border-radius: 8000upx;
				border-style: solid;
				border-width: 1px;
				border-color: #FFA847;
				line-height: 25upx;
				position: relative;
				.bg-yellow {
					background-color: #FFE7BA;
					opacity: 0.8;
				}
				.cu-progress-text{
					position: absolute;
					z-index: 1;
					left: 30upx;
					color: #FFA847;
					font-size: 20upx;
				}
			}
			
			.un-t{
				position: absolute;
				margin-left: -40upx;
			}
			.cu-progress1 {
				margin-left: 40upx;
				overflow: hidden;
				height: 28upx;
				background-color: #ffffff;
				display: inline-flex;
				text-align: center;
				width: 40%;
				border-radius: 8000upx;
				border-style: solid;
				border-width: 1px;
				border-color: #FF0000;
				line-height: 25upx;
			}
			.bg-red {
				background-color: #ffffff;
				color: #FF0000;
				font-size: 20upx;
				width: 100%;
			}
			
		}
	}
	
	.empty{
		position:fixed;
		left: 0;
		top:0;
		width: 100%;
		height: 100vh;
		padding-bottom:500upx;
		display:flex;
		justify-content: center;
		flex-direction: column;
		align-items:center;
		background: #fff;
		image{
			width: 240upx;
			height: 160upx;
			margin-bottom:30upx;
		}
		.empty-tips{
			font-size: $font-sm+2upx;
			color: $font-color-disabled;
		}
	}
</style>
